<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .big{width: 300px; height: 20px; border: 1px solid #eee;}
        .small{width: 0; height: 20px; background-color: green;}
    </style>
</head>

<body>
    <div class="big">
        <div class="small" style="width: 0px;">

        </div>
    </div>
    <input type="button" class="start" value="上传">
    <input type="button" class="stop" value="暂停">
    <input type="button" class="continue" value="继续">
    <input type="button" class="zero" value="清空">
</body>

</html>
<script>
    /*
        思想思路
            1、上传绑定点击事件
                创建定时器 反复修改small的宽度 如果宽度达到了终点就停止定时器
            2、暂停绑定点击事件
                停止定时器
            3、继续绑定点击事件
                创建定时器 反复修改small的宽度 如果宽度达到了终点就停止定时器
            4、清空
                停止定时器 将small的宽度设置为0
    */
   var timer;
   var bigDom=document.querySelector(".big");
   var smallDom=document.querySelector(".small");
   document.querySelector(".start").onclick=function(){
        
   }
   function go(){

    timer=setInterval(function(){
        var nowWidth=parseInt(window.getComputerStyle(smallDom).width);
        document.querySelector('.small').style.width=nowWidth+1+"px";
      },1)   
   }
</script>
</body>
</html>